import { Card, Flex, Form, Input, Selector, TextArea } from "@/components/base";
import { Typography } from "@/components/typography";
import * as hooks from '../../hooks';
import * as dataDictionary from '@shared/constant/dataDictionary'

const { Text } = Typography;

export function BasicInfoForm() {
    const { isEdit } = hooks.useSearch();

    return (
        <Card>
            <Text size={16} strong style={{ display: 'block', marginBottom: '16px' }}>
                基本信息
            </Text>

            <Form.Item
                label="服务编号"
                name="code"
                style={{ width: '100%', padding: 0 }}
                rules={[{ required: true, message: '请输入服务编号' }]}
            >
                <Input placeholder="请输入服务编号" disabled={isEdit} />
            </Form.Item>

            <Flex vertical >
                <Form.Item
                    label="服务名称"
                    name="name"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请输入服务名称' }]}
                >
                    <Input placeholder="请输入服务名称" />
                </Form.Item>

                <Form.Item
                    label="服务描述"
                    name="description"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请输入服务描述' }]}
                >
                    <TextArea placeholder="请输入服务描述" rows={3} />
                </Form.Item>

                <Form.Item
                    label="服务分类"
                    name="category"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请选择服务分类' }]}
                    getValueFromEvent={e => e[0]}
                    getValueProps={e => ({ value: [e] })}
                >
                    <Selector  
                        options={Object.entries(dataDictionary.serviceClassificationStr).map(([value, label]) => ({ label, value }))}
                    />
                </Form.Item>

                <Form.Item
                    label="服务时长(分钟)"
                    name="duration"
                    style={{ width: '100%', padding: 0 }}
                    rules={[{ required: true, message: '请输入服务时长' }]}
                >
                    <Input type="number" placeholder="请输入服务时长" />
                </Form.Item>
            </Flex>
        </Card>
    );
} 